 <template>
    <div class="messages" v-if="messages.length">
        <div v-for="(item,index) in messages">{{item.text}}</div>
        
    </div>
</template>
<script>
export default {
    data(){
        return {
            messages:[]
        }
    },
    mounted(){
        this.id = 0;//表示当前弹层的唯一标识
    },
    methods:{
        add(options){
            let id = this.id ++;
            let layer = {...options,id};
            this.messages.push(layer);
            layer.timer = setTimeout(()=>{
                this.remove(layer)
            },options.duration)


        },
        remove(layer){
            this.messages = this.messages.filter(message=>message.id!==layer.id)
            clearTimeout(layer.timer);

        }
    }
}
</script>
<style>
    .messages{
        position: fixed;
        right:10px;
        top:20px;
        border: 1px solid red;
        box-shadow: 1px 1px 2px gold -1px 1px 2px green;
    }
</style>